<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登陆页面</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css">
        <!-- <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/register.css"> -->
        <style>
            header {
                height: 130px;
                width: 100%;
                /* background-color: rgb(20, 30, 30, 0.2); */
            }
            body{
                background-image:url(${pageContext.request.contextPath}/static/img/loginpic.jpg);
                /*background-position: 10% 10%;*/
                background-size: 100% 110%;
                background-repeat: no-repeat;

            }
            .border {
                height: 170px;
                width: 1200px;
                margin: 0px auto;
                position: relative;
                /*border-bottom: 1px solid rgb(172, 170, 170);*/
                /* background-color: rgb(20, 130, 30, 0.2); */
            }
            
            .div1-1 {
                margin: 20px 0px;
                height: 70px;
                width: 420px;
                /* background-color: rgb(20, 0, 30, 0.2); */
            }
            
            .div1-1-1 {
                height: 100%;
                width: 260px;
                float: left;
                /* background-color: rgb(0, 0, 90, 0.2); */
            }
            
            .img {
                background-image: url(${pageContext.request.contextPath}/static/img/book.png);
                background-size: contain;
                height: 100%;
                width: 72px;
                float: left;
                /* background-color: rgb(100, 0, 90, 0.2); */
            }
            
            .font {
                height: 100%;
                float: left;
                width: 180px;
                font-size: 33px;
                padding: 10px 0px;
                /* background-color: rgb(200, 0, 90, 0.2); */
            }
            
            .div1-1-2 {
                float: left;
                border-left: 1px solid black;
                font-size: 25px;
                padding: 0px 23px;
                height: 30px;
                width: 160px;
                margin: 19px 0px;
                /* background-color: rgb(0, 90, 90, 0.2); */
            }
            
            .div1-2 {
                margin: 50px auto 0px;
                width: 330px;
                height: 50px;
                border-bottom: 2px solid rgb(139, 40, 40);
                /* background-color: rgb(0, 0, 30, 0.2); */
            }
            
            p {
                padding: 12px 110px 0px 110px;
                font-size: 18px;
            }
        </style>
    </head>

    <body>


        <header>
            <div class="border">
                <div class="div1-1">
                    <div class="div1-1-1">
                        <div class="img"></div>
                        <div class="font">星月小说网</div>
                    </div>
                    <div class="div1-1-2">登录</div>
                </div>



            </div>
        </header>
        <div class="div1">

            <form action="${pageContext.request.contextPath}/guest/user/login" method="post">

                <div class="div2-2">

                    <label class="div2-2-1" for="div2-2-1-1">用户登录
                    <input type="radio" id="div2-2-1-1"  name="role" value="user" style="visibility: hidden" checked>
                </label>
                    <label class="div2-2-2" for="div2-2-2-1">管理员登录
                    <input type="radio" id="div2-2-2-1" name="role" value="admin" style="visibility: hidden">
                </label>
                    <label class="div2-2-3" for="div2-2-3-1">作者登录
                    <input type="radio" id="div2-2-3-1" name="role" value="author" style="visibility: hidden">
                </label>
                </div>

                <div class="div2-3">
                    <div class="div2-3-1">
                        <div class="div2-3-1-1"></div>
                        <input type="text" name="username" placeholder="用户名" class="div2-3-1-2">
                    </div>

                </div>
                <div class="div2-4">
                    <div class="div2-4-1">
                        <div class="div2-4-1-1"></div>
                        <input type="password" name="password" placeholder="密码" class="div2-4-1-2">
                    </div>

                </div>
                <div class="div2-5">
                    <div class="div2-5-1">
                        <input type="text" class="div2-5-1-1" name="code" placeholder="   请输入验证码">
                        <div class="div2-5-1-2">
                            <div>
                                <img onclick="this.src=this.src+'?'+Math.random()" src="${pageContext.request.contextPath}/guest/code" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="div2-8">${login_info}</div>




                <div class="div2-6">
                    <div class="pu2"><input type="submit" value="登 陆" class="div2-6-1"></div>

                </div>
            </form>
            <div class="div2-7"><a href="${pageContext.request.contextPath}/guest/register">免费注册</a></div>
        </div>
        <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/login.js"></script>

    </body>

    </html>